<template>
  <div class="address_book">
    <div class="head_title">
      <router-link to="/myhome" tag="span" class="iconfont icon-fanhuijiantou"></router-link>
      我的地址簿
    </div>

    <div class="checkout_address" v-if="addressData">
      <div class="list">
        <div class="li" v-for="item in addressData" :key="item.id">
          <div class="content">
            <div class="Information">
              <div class="name">
                <span>{{item.name}}</span>
                <!-- <img src="../../public/images/img/company@3x.png" alt="" />
                <span class="firm">公司</span> -->
              </div>
              <div class="number">{{item.tel}}</div>
            </div>
            <div class="detail">中国 {{item.province}} {{item.city}} {{item.county}}</div>
            <div class="small">{{item.addressDetail}}</div>
            <div class="postcode">{{item.postalCode}}</div>
          </div>
          <div class="action">
            <div class="default" @click=" checkedOnli(item.addressId)">
              <div :class="['c_checkbox', item.isDefault ? 'con' : '']"></div>
              <span>默认地址</span>

            </div>
            <div class="ope_address">
                <div class="edit iconfont icon-wenbenbianji" @click="replace(item.addressId)"></div>
                <div class="delete iconfont icon-icon" @click="removAddress(item.addressId)"></div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <router-link to="/addaddress" tag="div" class="checkout_contrl">添加新地址</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {

      addressData:null,
    };
  },
  methods:{
    //获取地址数组
    getData(){
      this.addressData = JSON.parse(localStorage.getItem("addressDta"))
    },
    //删除地址
    removAddress(id){
      let index = this.addressData.findIndex(item => item.addressId == id)
      this.addressData.splice(index,1);
      window.localStorage.setItem("addressDta",JSON.stringify(this.addressData))
    },
    //默认地址
    checkedOnli(id){
        let index = this.addressData.findIndex(item => item.addressId == id)
        this.addressData.forEach(item => {
            item.isDefault = false;

        });
        this.addressData[index].isDefault = true;
      window.localStorage.setItem("addressDta",JSON.stringify(this.addressData))

    },
    //替换
    replace(id){
       let index = this.addressData.findIndex(item => item.addressId == id)
       let obj =  this.addressData[index];
      window.localStorage.setItem("addressDta",JSON.stringify(this.addressData))
      this.$router.push({path:'/addaddress',query: {data:obj} })
    },
  },
  //
  created(){
    this.getData()
    console.log(this.addressData);
  }
};
</script>

<style lang="scss" scoped>
.address_book {
  background-color: #f2f2f2;
  height: 100%;
  .head_title {
    height: 50px;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    text-align: center;
    line-height: 49px;
    background-color: #fff;
    font-size: 19px;
    span {
      padding-left: 10px;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 50px;
      text-align: center;
      font-size: 28px;
      height: 50px;
    }
  }
  .checkout_address {
    .list {
      .li {
        background-color: #fff;
        margin-top: 6px;

        .content {
          padding-left: 17px;
          border-top: 1px solid transparent;
          padding-right: 15px;
          color: #464646;
          font-size: 13px;
          .detail {
            margin-top: 5px;
          }
          div {
            height: 20px;
          }
          .postcode,
          .number,.small {
            font-size: 14px;
            margin-top: 5px;
          }
          .Information {
            display: flex;
            margin-top: 5px;
            justify-content: space-between;
            .name {
              display: flex;
              align-items: flex-end;
              img {
                width: 20px;
                height: 20px;
                margin-left: 5px;
              }
              .firm {
                font-size: 12px;
                color: #5d6bb9;
              }
            }
          }
        }
        .action {
            height: 35px;
            border-top: 1px solid #E6E6E6;
            padding: 0 17px;
            display: flex;
            justify-content: space-between;
          .default {
            display: flex;
            height: 100%;
            align-items: center;
            span{
                color: #a0a0a0;
            }
            .c_checkbox {
              width: 18px;
              height: 18px;
              margin-right: 10px;
              border: none;
              background-image: url("../../public/images/img/c_checkbox_off.png");
              background-repeat: no-repeat;
              background-position: center center;
              background-size: cover;
              border-radius: 20px;
            }
            .c_checkbox.con {
              background-image: url("../../public/images/img/c_checkbox_on.png");
            }
          }
          .ope_address{
            flex: 1;
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: flex-end;
            color: #a0a0a0;
            .edit{
                font-size: 22px;
                margin-right: 50px;
            }
            .delete{
                font-size: 24px;
            }
          }
        }
      }
    }
  }
  .checkout_contrl{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #FF4F45;
    color: #fff;
    text-align: center;
    height: 40px;
    line-height: 42px;
    font-size: 14px;
  }
}
</style>